<template>
    <view class="bill-container flex fd-c">
        <topBar :back="true">
            <template #center>
                <!-- 导航栏 -->
                <view class="nav-bar flex ai-c jc-c">
                    <view class="nav-tabs flex ai-c" style="font-size: 32rpx;font-weight: 700;color: #333;">
                        设置
                    </view>
                </view>
            </template>
        </topBar>
        <!-- 内容区域 -->
        <scroll-view class="scrollable-content" scroll-y>
            <view class="announcement-item flex jc-sb ai-c">
                <view class="detail-label">头像</view>
                <!-- 使用 button 包裹一个 image 组件是常见做法 -->
                <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                    <view class="detail-value flex ai-c">
                        <image :src="userStore.avatar" mode="aspectFit"
                            style="width: 76rpx;height: 76rpx;margin-right: 34rpx;">
                        </image>
                        <image src="/static/youzhuangjiantyou.png" mode="aspectFit" style="width: 32rpx;height: 32rpx;">
                        </image>
                    </view>
                </button>
            </view>
            <view class="announcement-item flex jc-sb ai-c" @click="handleEditName">
                <view class="detail-label">昵称</view>
                <view class="detail-value flex ai-c">
                    <text style="margin-right: 34rpx;">{{ userStore.nickname }}</text>
                    <image src="/static/youzhuangjiantyou.png" mode="aspectFit" style="width: 32rpx;height: 32rpx;">
                    </image>
                </view>
            </view>
            <view class="announcement-item">
                <view class="detail-label" style="margin-bottom: 82rpx;color: #7e7e7e;">
                    账号安全
                </view>
                <view class="flex jc-sb ai-c" style="margin-bottom: 82rpx;">
                    <view class="detail-label">手机号</view>
                    <view class="detail-value flex ai-c">
                        <text style="margin-right: 34rpx;">{{ userStore.userInfo?.phone }}</text>
                        <image src="/static/youzhuangjiantyou.png" mode="aspectFit" style="width: 32rpx;height: 32rpx;">
                        </image>
                    </view>
                </view>
                <view class="flex jc-sb ai-c">
                    <view class="detail-label">微信账号</view>
                    <view class="detail-value flex ai-c">
                        <text style="margin-right: 34rpx;">未绑定</text>
                        <image src="/static/youzhuangjiantyou.png" mode="aspectFit" style="width: 32rpx;height: 32rpx;">
                        </image>
                    </view>
                </view>
            </view>
            <view class="announcement-item flex jc-sb ai-c" @click="handleAbout">
                <view class="detail-label">关于《逆袭吧》</view>
                <view class="detail-value flex ai-c">
                    <image src="/static/youzhuangjiantyou.png" mode="aspectFit" style="width: 32rpx;height: 32rpx;">
                    </image>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup>
import topBar from '@/components/topBar.vue'
import { ref } from 'vue'
import api from '@/api'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/index.js'
const userStore = useUserStore()

const handleEditName = () => {
    uni.navigateTo({ url: '/pages/index/announcement/editName' })
}
const onChooseAvatar = async (e) => {
    console.log('onChooseAvatar 被调用', e)
    try {
        const { avatarUrl } = e.detail
        console.log('选择的头像URL:', avatarUrl)
        if (!avatarUrl) return
        
        // 显示加载提示
        uni.showLoading({
            title: '上传中...'
        })
        
        // 上传头像到服务器
        const uploadRes = await api.uploadFile(avatarUrl, {
            file: avatarUrl
        })

        console.log('uploadRes', uploadRes)
        
        if (uploadRes.code === 1) {
            // 更新用户头像
            const newUserInfo = {
                ...userStore.userInfo,
                avatar: uploadRes.data.fullurl
            }
            
            // 调用更新用户信息接口
            const updateRes = await api.updateUserInfo({
                ...newUserInfo,
                user_id: userStore.userInfo?.id
            })
            
            if (updateRes.code === 1) {
                // 更新本地状态
                userStore.setUserInfo(newUserInfo)
                uni.showToast({
                    title: '头像更新成功',
                    icon: 'success'
                })
            } else {
                uni.showToast({
                    title: '头像更新失败',
                    icon: 'none'
                })
            }
        } else {
            uni.showToast({
                title: '上传失败',
                icon: 'none'
            })
        }
    } catch (error) {
        console.error('头像上传失败:', error)
        uni.showToast({
            title: '上传失败',
            icon: 'none'
        })
    } finally {
        uni.hideLoading()
    }
}
const handleAbout = () => {
    uni.navigateTo({ url: '/pages/index/announcement/about' })
}
</script>

<style scoped>
.bill-container {
    height: 100vh;
    background-color: #f7f7f7;
    position: relative;
    display: flex;
    flex-direction: column;
}

.scrollable-content {
    padding: 32rpx;
    box-sizing: border-box;
}

.announcement-item {
    padding: 46rpx 32rpx;
    background-color: #fff;
    border-radius: 24rpx;
    margin-bottom: 24rpx;
}

.detail-label {
    font-size: 26rpx;
    color: #333;
	font-weight: 700;
}

.detail-value {
    font-size: 26rpx;
    color: #333;
}
.avatar-wrapper {
    background-color: transparent;
    border: none;
    margin: 0;
    padding: 0;
}
.avatar-wrapper::after{
    border: none;
}
</style>
